<!-- 监控列表 -->

<template>
  <div class="MonitorList" :class="{ 'MonitorList-3': INIT_PARAM.pageSize === 9 }">
    <div v-if="!isEmpty">
      <div v-for="item in list" :key="item.id" class="MonitorList-item">
        <div
          class="MonitorList-item-panel"
          :class="{ 'MonitorList-item-panel-alarm': item.hasAlarm === 1 }"
          @click="map_openModal(item)"
        >
          <div class="ellips">
            <b>{{ item.deviceName }}</b>
          </div>

          <div class="ellips">{{ CORE.REGION.NAME[item.areaId] || item.areaName || '-' }}</div>

          <div class="flexCC">
            <slot name="item" :item="item">
              <img :src="getImg(item)" />
            </slot>
          </div>
        </div>
      </div>
    </div>

    <el-empty v-if="isEmpty" :description="`暂无${MAP.WORD}`" />

    <WebTable :elPageProps="MAP[`PAGE_${INIT_PARAM.pageSize === 9 ? 3 : 5}`]" noTable />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MonitorList',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixModal('map', 'map_')],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取图片
     */
    getImg({ yxzt = {}, deviceCategoryId: category, deviceTypeId: type }) {
      const suf = yxzt.value === '1' ? 'run' : 'stop'
      return CORE.common(`monitor/${category}/${type}_${suf}.png`)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
